SuaHDTraHangPanel = Ext.extend(AbstractPanel, {
	layout: 'anchor',
    defaults: {anchor: '100%'},
    
    initComponent : function() {
    	this.formLabel = new Ext.form.Label({
			cls : 'main-title',
			text : lang.text.hd.suaHdTraHang.toUpperCase()
		});
		
		this.formLabelContainer = new Ext.Container({
			cls : 'field-align-center',
			items : [this.formLabel]
		});
		
		this.hdFieldSet = new HopDongInfoFieldSet({
			readOnly : true,
			allowInputMaHd : false,
			height : 180
		});
		
		this.traHangInfoFieldSet = this.initTraHangInfoFieldSet();
		var buttonBar = this.initButtonBar();
    	this.items = [this.formLabelContainer, {xtype : 'spacer', height : 10},
		              this.hdFieldSet, {xtype : 'spacer', height : 20},
					  this.traHangInfoFieldSet, {xtype : 'spacer', height : 20}, buttonBar];
    	SuaHDTraHangPanel.superclass.initComponent.call(this);
    },
    
    initTraHangInfoFieldSet : function() {
    	var fieldPlugin = new CustomizedFieldPlugin();
    	this.soTienTraTextField = new Ext.ux.NumericField({
    		name : "soTien",
			width : 250,
			fieldLabel : lang.text.hd.soTienTra,
			autoCreate: {
	            tag: 'input', type: 'text', size: '20',
	            autocomplete: 'off', maxlength: '12'},
			useThousandSeparator : true,
			allowNegative : false,
			selectOnFocus : true,
			unit : tt_default.hd.unit,
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
    	});
    	
    	this.khauHaoTextField = new Ext.ux.NumericField({
    		name : "khauHao",
			width : 250,
			fieldLabel : lang.text.hd.khauHao,
			value : (ApplicationManager.hdInfo.tienTraTruoc + ApplicationManager.hdInfo.tienDaThu) / 1000 < tt_default.hd.khauHao ?
					(ApplicationManager.hdInfo.tienTraTruoc + ApplicationManager.hdInfo.tienDaThu) / 1000 : tt_default.hd.khauHao, 
			autoCreate: {
	            tag: 'input', type: 'text', size: '20',
	            autocomplete: 'off', maxlength: '12'},
			useThousandSeparator : true,
			unit : tt_default.hd.unit,
			readOnly : true,
			allowNegative : false,
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
    	}); 
    	
    	this.ngayThuDateField = new ThienTanDateField({
			fieldLabel : lang.text.hd.ngayTra,
			autoCreate: {
	            tag: 'input', type: 'text', size: '10',
	            autocomplete: 'off', maxlength: '6'},
			width : 180,
			value : new Date(),
			selectOnFocus : true,
			name: 'ngayLap',
			allowBlank : false,
			mandatory : true
		});
    	
    	var leftCtn = new Ext.Container({
			layout : 'customizedlayout',
			labelWidth : 120,
			columnWidth: .5,
			items : [this.soTienTraTextField, this.khauHaoTextField, this.ngayThuDateField]
		});
    	
    	this.ghiChuTextArea = new Ext.form.TextArea({
    		name : 'ghiChu',
    		width : 250,
    		fieldLabel : lang.text.ghiChu
    	});
    	
    	var rightCtn = new Ext.Container({
			layout : 'customizedlayout',
			labelWidth : 70,
			columnWidth: .5,
			items : [this.ghiChuTextArea]
		});
    	
    	return new Ext.form.FieldSet({
			title : lang.text.hd.traHangInfo,
			autoHeight : true,
			height : 120,
			layout : 'column',
			items : [leftCtn, {xtype : 'spacer', width : 20}, rightCtn]
		});
    },
    
    initButtonBar : function() {
    	this.luuBtn = new Ext.Button({
			width : 40,
			text : lang.text.luu
		});
		
		this.thoatBtn = new Ext.Button({
			width : 40,
			text : lang.text.thoat
		});
		
		return new Ext.Container({
			layout : 'hbox',
			items : [this.luuBtn, {xtype : 'spacer', width : 13}, this.thoatBtn]
		});
    },
    
    afterRender : function() {
    	this.submitButtons = [this.luuBtn];
    	this.soTienTraTextField.on('afterrender', function(){
            this.soTienTraTextField.focus(true);
		}, this);
    	
    	this.hdFieldSet.loadHdInfoToForm(ApplicationManager.hdInfo);
		this.soTienTraTextField.value = (ApplicationManager.hdInfo.tienTraTruoc + ApplicationManager.hdInfo.tienDaThu) / 1000 - this.khauHaoTextField.value;
    	SuaHDTraHangPanel.superclass.afterRender.call(this);
    },
    
    validateTienTraKhach : function() {
    	var field = this.soTienTraTextField;
    	field.clearInvalid();
    	
    	var value = field.getValue();
    	if (value * 1000 > ApplicationManager.hdInfo.tienDaThu + ApplicationManager.hdInfo.tienTraTruoc || value < 0) {
    		field.markInvalid({id : 'soTien', action : 'error', msg : lang.msg.validateTienTraKhach})
    		return false;
		}
    	field.setValue(value);
    	this.khauHaoTextField.setValue((ApplicationManager.hdInfo.tienDaThu + ApplicationManager.hdInfo.tienTraTruoc) / 1000 - value);
    	return true;
    },

    defaultActionHandler : function(){
		if(!this.ghiChuTextArea.hasFocus) {
			this.save();
		}
	},
    
    save : function() {
		this.disableButtons();
		if (!this.validateTienTraKhach()) {
			return;
		}
		this.getForm().submit({
		    me : this,
		    url : 'phieuThu/suaHdTraHang',
            waitMsg: lang.text.saving,
            waitMsgTarget : true,
            success : function(action, response) {
            	this.enableButtons();
            	var result = Ext.decode(response.response.responseText);
            	if (result.success) {
            		ApplicationManager.callbackMsg = result.msg;
                	ApplicationManager.openMenu(ApplicationManager.traHangFrom);
                	ApplicationManager.callbackMsg = null;
                	ApplicationManager.hdInfo = null;
				} else {
					this.notifyMessage(result.msg);
				}
            },
            failure : function(action, response) {
            	this.enableButtons();
            },
            scope : this
        });
    }
});